<template>
  <div class="nav shadow">
    <div
      class="navbar-container"
      :class="[navIsHidden ? 'nav-ishidden' : 'nav-ishown']"
    >
      <div
        class="navbar-container-inner"
        :style="{ transform: `translateY(${navOffSetY}px)` }"
      >
        <!-- 总导航 -->
        <div class="universe-navbar">
          <div class="logo"></div>
          <div class="name">CMUP</div>
          <!-- 选项栏 -->
          <input type="radio" name="nav-item" value="" id="home" />
          <input type="radio" name="nav-item" value="" id="discover" />
          <input type="radio" name="nav-item" value="" id="playlists" />
          <input type="radio" name="nav-item" value="" id="singers" />
          <div class="navlist">
            <label
              for="home"
              @click="pushTo('homepage', 1)"
              :class="{ active: navSelected == 1 }"
              >首页</label
            >
            <label
              for="rankings"
              @click="pushTo('discover', 2)"
              :class="{ active: navSelected == 2 }"
              >发现</label
            >
            <div
              id="nav-clicked"
              :style="{
                '--multipleNumber': navSelected - 1,
                display: navSelected == 0 ? 'none' : '',
              }"
            ></div>
          </div>
          <!-- 选项栏 -->

          <!-- 搜索输入框 -->
          <searchinput @handleSearch="handleSearch"></searchinput>
          <!-- 搜索输入框 -->
          <!-- 右边部分 -->
          <div class="navbar-right">
            <!-- 通知按钮 -->
            <span class="navbar-right-op" @click="showNotification">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-cmnews"></use>
              </svg>
            </span>
            <!-- 通知按钮 -->
            <!-- 消息按钮 -->
            <span class="navbar-right-op" @click="toChat">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-cmcommunicate"></use>
              </svg>
            </span>
            <!-- 消息按钮 -->
            <router-link to="/login" tag="div" class="user" v-if="!user.token"
              >登录</router-link
            >
            <router-link
              tag="div"
              class="user"
              v-if="user.token"
              :to="{
                path: '/usercenter',
                query: { userNo: ToPer, choice: 1 },
              }"
              @click.native="flushCom"
            >
              <img :src="user.userProfile" />
            </router-link>
            <div
              class="user"
              v-if="whichPage() == 'usercenter'"
              @click="logOut()"
            >
              退出登录
            </div>
          </div>
          <!-- 右边部分 -->
        </div>
        <!-- 总导航 -->

        <!-- 处于搜索页面时导航 -->
        <searchnavbar v-if="$route.path == '/searchpage'"></searchnavbar>
        <!-- 处于搜索页面时导航 -->
      </div>
    </div>

    <!-- <div
      class="searchBox shadow"
      v-show="visibility"
      ref="searchBox"
      :class="{
        'searchbox-show': searchClicked,
        'searchbox-dis': !searchClicked,
      }"
    ></div> -->

    <!-- 通知弹出框 -->
    <popover
      :position="truewidth"
      :show="showup"
      :vis="notiVis"
      :toTopDistance="toTopDistance"
    >
      <notificationnew :notifacations="notifacationdata"></notificationnew>
    </popover>
    <!-- 通知弹出框 -->

    <popover
      :show="searchClicked"
      :vis="visibility"
      :position="truewidth"
      :toTopDistance="toTopDistance"
    >
      <searchmodel></searchmodel>
    </popover>

    <!-- <notification
      ref="noti"
      :pos="truewidth"
      :vis="notiVis"
      :showup="showup"
      :notifacations="notifacationdata"
    ></notification> -->
    <cmModal :height="615" :width="1000" :bodyClosable="true" v-model="chatVis" @bodyClose="bodyClose()">
      <chat></chat>
    </cmModal>
  </div>
</template>

<script>
// import Notification from "./notification.vue";
import { mapGetters, mapMutations } from "vuex";
import Searchnavbar from "../searchcomponent/searchnavbar.vue";
import Searchinput from "../searchcomponent/searchinput.vue";
import Notificationnew from "./notificationnew.vue";
import Popover from "./pop/popover.vue";
import { removeUselessNoti } from "../../utils/utils";
import CmModal from "../common/pop/cmModal.vue"
import chat from "../../pages/chat.vue"

export default {
  data() {
    return {
      ToPer:"",
      visibility: false,
      searchClicked: false,
      navselected: 0,
      notiVis: false,
      truewidth: "", //点击元素计算弹出框距离左边位置
      toTopDistance: "", //点击元素计算弹出框距离顶部位置
      showup: false,
      notifacationdata: "",
      navIsHidden: false,
      timer:'',
      chatVis: false,
    };
  },

  components: { Searchnavbar, Searchinput, Notificationnew, Popover, CmModal, chat },

  computed: {
    navSelected: {
      get() {
        let path = this.$route.path.split("/")[1];
        let result = 0;
        console.log(path);
        switch (path) {
          case "homepage":
            result = 1;
            break;
          case "discover":
            result = 2;
            break;
          case "playlists":
            result = 3;
            break;
          case "singers":
            result = 4;
            break;
          default:
            result = 0;
            break;
        }
        return result;
      },
      set() {
        return this.navselected;
      },
    },
    ...mapGetters([
      "user",
      // 'navbarVis'
      //   "navOffSetY",
    ]),
    navbarVis() {
      return this.$store.getters.navbarVis;
    },
    navOffSetY() {
      return this.$store.getters.navOffSetY;
    },

  },

  // mounted() {
  //   // document.addEventListener("click", this.bodyClose);
  // },
  created() {
    this.judgeUrl();
    this.getUser();
    this.ToPer=window.localStorage.getItem("userNo")
    // const that = this;
    // // eslint-disable-next-line no-unused-vars
    // var t2 = window.setInterval(function () {
    //   that.$getApi.getUserNotification(that.user.userNo).then((res) => {
    //     that.notifacationdata = removeUselessNoti(res.data.notifications);
    //   });
    // }, 5000);
  },
  methods: {
    flushCom(){
      this.$router.go(0)
    },
    showSearchBox() {
      this.visibility = true;
      this.searchClicked = true;
    },
    bodyClose() {
      // let self = this;
      // if (
      //   this.$refs.container &&
      //   !this.$refs.container.contains(e.target) &&
      //   !this.$refs.searchBox.contains(e.target)
      // ) {
      //   self.searchClicked = false;
      //   setTimeout(function () {
      //     self.visibility = false;
      //   }, 200);
      // }
      console.log("bodyClose")
      this.chatVis= false
    },
    pushTo(link, key) {
      this.$router.push({ path: link });
      this.navSelected = key;
    },
    judgeUrl() {
      let path = this.$route.path.split("/")[1];
      console.log(path);
      switch (path) {
        case "home":
          this.navSelected = 1;
          break;
        case "rankings":
          this.navSelected = 2;
          break;
        case "playlists":
          this.navSelected = 3;
          break;
        case "singers":
          this.navSelected = 4;
          break;
        default:
          this.navSelected = 0;
          break;
      }
    },
    whichPage() {
      let path = this.$route.path.split("/")[1];
      return path;
    },
    getPosition(e) {
      console.log(e);
      let rect = e.target.getBoundingClientRect();
      let width = rect.width;
      let height = rect.height; // eslint-disable-line no-unused-vars
      let x1 = rect.left;
      let x2 = rect.right; // eslint-disable-line no-unused-vars
      let y1 = rect.top; // eslint-disable-line no-unused-vars
      let y2 = rect.bottom; // eslint-disable-line no-unused-vars
      let truewidth = width / 2 + x1; // eslint-disable-line no-unused-vars
      this.toTopDistance = y2 + 20;
      return truewidth;
    },
    showNotification(e) {
      let tw = this.getPosition(e);
      let self = this;
      this.showup = !this.showup;
      const that = this
      if (this.showup == true) {
        this.timer = window.setInterval(function () {
          that.$getApi.getUserNotification(that.user.userNo).then((res) => {
            that.notifacationdata = removeUselessNoti(res.data.notifications);
          });
        }, 500);
      }
      else{
        clearInterval(this.timer);
      }
      console.log(tw);
      if (this.notiVis == false) this.notiVis = !this.notiVis;
      else {
        setTimeout(function () {
          self.notiVis = false;
        }, 200);
      }
      this.truewidth = tw;
    },
    logOut() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    getUser() {
      const that = this;
      this.$getApi.getUserInfo(this.user.userNo).then((res) => {
        let userInfo = res.data.userInformation;
        localStorage.setItem("userProfile", userInfo.userProfile);
        let user = {
          account: "",
          token: localStorage.getItem("token"),
          userNo: window.localStorage.getItem("userNo"),
          userProfile: userInfo.userProfile,
        };
        that.setUser(user);
      });
    },
    toChat() {
      // this.$router.push('/chat')
      this.chatVis = true
    },
    handleSearch(val){
      console.log('searchcontent',val)
      this.$router.push({
        path: "/searchpage",
        query: { keyword: val },
      });
    },
    ...mapMutations(["setUser", "setNavbarVisibility"]),
  },
  watch: {
    // '$route.path':function (newVal,oldVal){
    //   if(newVal!==oldVal)
    //   {
    //     this.$router.go(0)
    //   }
    // },
    // navbarVis(newval) {
    //   if (newval == false) {
    //     let that = this;
    //     setTimeout(function () {
    //       that.navanimation = false;
    //     }, 90);
    //   } else {
    //     this.navanimation = true;
    //   }
    // },
    navOffSetY(newval) {
      const that = this;
      if (newval == -50) {
        console.log("判断相等");
        setTimeout(function () {
          that.navIsHidden = true;
        }, 300);
      } else if (newval == 0) {
        //
        this.navIsHidden = false;
      }
    },
  },
};
</script>
<style>
.nav {
  width: 100%;
  height: 52px;
  background-color: rgba(255, 255, 255, 0.85);
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(30px);
  z-index: 666;
}
.shadow {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.navbar-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.nav-ishown {
  overflow: hidden;
}
.navbar-container-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  transition: all 0.3s;
}
.universe-navbar {
  min-width: 800px;
  width: 1200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  position: relative;
  flex-wrap: nowrap;
  transition: all 0.3s;
}
.logo {
  width: 60px;
  height: 50px;
  background-position: 0px center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-image: url("/static/logo/logo.png");
}
.name {
  font-size: 20px;
  font-weight: 600;
  width: 80px;
}
.navlist {
  height: 100%;
  margin-left: 2rem;
  display: flex;
  align-items: center;
  position: relative;
  width: 360px;
}
/* .navlist li{
        list-style: none;
        padding: 0;
        margin: 0;
        float: left;
        font-size: 15px;
        padding: 2px 15px;
        cursor: pointer;
        height: 1.2rem;
        width: 3.8rem;
        text-align: center;
        z-index: 19;
    } */
.navlist label {
  font-size: 14px;
  font-weight: 500;
  height: 100%;
  width: 4.6rem;
  line-height: 52px;
  text-align: center;
  display: inline-block;
  z-index: 19;
}

#nav-clicked {
  position: absolute;
  background-color: rgb(4, 143, 250);
  height: 0.2rem;
  width: 3.8rem;
  border-radius: 1.1rem;
  top: 70%;
  transition: transform 0.6s ease;
  left: 0.4rem;
  --multipleNumber: 0;
  transform: translate3d(calc(4.6rem * var(--multipleNumber)), 0, 0);
}

/* 右边部分 */
.navbar-right {
  position: relative;
  height: 40px;
  width: 500px;
  font-size: 15px;
  align-items: center;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  transition: all 0.4s ease;
}
.user {
  position: relative;
  height: 80px;
  width: 80px;
  font-size: 15px;
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.user > img {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  object-fit: cover;
  background-position: center;
  background-size: cover;
}
.navbar-right-op {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  font-size: 20px;
}
/* 右边部分 */

.nav input[type="radio"] {
  display: none;
}
label.active {
  color: rgb(4, 143, 250);
}
</style>
